<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Gentelella Alela! | </title>

    <!-- Bootstrap -->
    <!-- Font Awesome -->
    <!-- NProgress -->
    <!-- Custom styling plus plugins -->
    <script type="module" src="/src/main-minimal-modern.js"></script>
  </head>

  <body class="nav-md page-typography">
    <div class="container body">
      <div class="main_container">
        <div class="col-md-3 left_col">
          <div class="left_col scroll-view">
            <div class="navbar nav_title" style="border: 0;">
              <a href="index.html" class="site_title"><img src="images/logo.svg" alt="Gentelella Alela!" class="logo-full" style="height: 40px;"><img src="images/logo-icon.svg" alt="Gentelella" class="logo-icon" style="height: 30px; display: none;"></a>
            </div>

            <div class="clearfix"></div>

            <!-- menu profile quick info -->
            <div class="profile clearfix">
              <div class="profile_pic">
                <img src="images/img.jpg" alt="..." class="img-circle profile_img">
              </div>
              <div class="profile_info">
                <span>Welcome,</span>
                <h4>John Doe</h4>
              </div>
            </div>
            <!-- /menu profile quick info -->

            <br />

            <!-- sidebar menu -->
            <div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
              <div class="menu_section">
                <h3>General</h3>
                <ul class="nav side-menu">
                  <li><a><i class="fas fa-home"></i> Home <span class="fas fa-chevron-down"></span></a>
                    <ul class="nav child_menu">
                      <li><a href="index.html">Dashboard 1</a></li>
                      <li><a href="index2.html">Dashboard 2</a></li>
                      <li><a href="index3.html">Dashboard 3</a></li><li><a href="index4.html">Dashboard 4</a></li>
                      <li><a href="index3.html">Dashboard 3</a></li>
                    </ul>
                  <li><a><i class="fas fa-edit"></i> Forms <span class="fas fa-chevron-down"></span></a>
                    <ul class="nav child_menu">
                      <li><a href="form.html">General Form</a></li>
                      <li><a href="form_advanced.html">Advanced Components</a></li>
                      <li><a href="form_validation.html">Form Validation</a></li>
                      <li><a href="form_wizards.html">Form Wizard</a></li>
                      <li><a href="form_upload.html">Form Upload</a></li>
                      <li><a href="form_buttons.html">Form Buttons</a></li>
                    </ul>
                  <li><a><i class="fas fa-desktop"></i> UI Elements <span class="fas fa-chevron-down"></span></a>
                    <ul class="nav child_menu">
                      <li><a href="general_elements.html">General Elements</a></li>
                      <li><a href="media_gallery.html">Media Gallery</a></li>
                      <li><a href="typography.html">Typography</a></li>
                      <li><a href="icons.html">Icons</a></li>

                      <li><a href="widgets.html">Widgets</a></li>
                      <li><a href="invoice.html">Invoice</a></li>
                      <li><a href="inbox.html">Inbox</a></li>
                      <li><a href="calendar.html">Calendar</a></li>
                    </ul>
                  <li><a><i class="fas fa-table"></i> Tables <span class="fas fa-chevron-down"></span></a>
                    <ul class="nav child_menu">
                      <li><a href="tables.html">Tables</a></li>
                      <li><a href="tables_dynamic.html">Table Dynamic</a></li>
                    </ul>
                  <li><a><i class="fas fa-chart-column"></i> Data Presentation <span class="fas fa-chevron-down"></span></a>
                    <ul class="nav child_menu">
                      <li><a href="chartjs.html">Chart JS</a></li>
                      <li><a href="chartjs2.html">Chart JS2</a></li>
                      <li><a href="chart3.html">Chart JS3</a></li>
                      <li><a href="echarts.html">ECharts</a></li>
                      <li><a href="other_charts.html">Other Charts</a></li>
                    </ul>
                  <li><a><i class="fas fa-clone"></i>Layouts <span class="fas fa-chevron-down"></span></a>
                    <ul class="nav child_menu">
                      <li><a href="fixed_sidebar.html">Fixed Sidebar</a></li>
                      <li><a href="fixed_footer.html">Fixed Footer</a></li>
                    </ul>
                </ul>
              </div>
              <div class="menu_section">
                <h3>Live On</h3>
                <ul class="nav side-menu">
                  <li><a><i class="fas fa-bug"></i> Additional Pages <span class="fas fa-chevron-down"></span></a>
                    <ul class="nav child_menu">
                      <li><a href="e_commerce.html">E-commerce</a></li>
                      <li><a href="projects.html">Projects</a></li>
                      <li><a href="project_detail.html">Project Detail</a></li>
                      <li><a href="contacts.html">Contacts</a></li>
                      <li><a href="profile.html">Profile</a></li>
                    </ul>
                  <li><a><i class="fas fa-window-restore"></i> Extras <span class="fas fa-chevron-down"></span></a>
                    <ul class="nav child_menu">
                      <li><a href="page_403.html">403 Error</a></li>
                      <li><a href="page_404.html">404 Error</a></li>
                      <li><a href="page_500.html">500 Error</a></li>
                      <li><a href="plain_page.html">Plain Page</a></li>
                      <li><a href="login.html">Login Page</a></li>
                      <li><a href="pricing_tables.html">Pricing Tables</a></li>
                    </ul>
                  <li><a><i class="fas fa-sitemap"></i> Multilevel Menu <span class="fas fa-chevron-down"></span></a>
                    <ul class="nav child_menu">
                        <li><a href="#level1_1">Level One</a></li>
                        <li><a>Level One<span class="fas fa-chevron-down"></span></a>
                          <ul class="nav child_menu">
                            <li class="sub_menu"><a href="level2.html">Level Two</a>
                            <li><a href="#level2_1">Level Two</a>
                            <li><a href="#level2_2">Level Two</a>
                          </ul>
                        <li><a href="#level1_2">Level One</a></li>
                    </ul>
                  <li><a href="landing.html"><i class="fas fa-laptop"></i> Landing Page</a></li>
                </ul>
              </div>

            </div>
            <!-- /sidebar menu -->

            <!-- /menu footer buttons -->
            <div class="sidebar-footer hidden-small">
              <a data-bs-toggle="tooltip" data-bs-placement="top" title="Settings">
                <span class="fas fa-cog" aria-hidden="true"></span>
              </a>
              <a data-bs-toggle="tooltip" data-bs-placement="top" title="FullScreen">
                <span class="fas fa-expand" aria-hidden="true"></span>
              </a>
              <a data-bs-toggle="tooltip" data-bs-placement="top" title="Lock">
                <span class="fas fa-eye-slash" aria-hidden="true"></span>
              </a>
              <a data-bs-toggle="tooltip" data-bs-placement="top" title="Logout" href="login.html">
                <span class="fas fa-power-off" aria-hidden="true"></span>
              </a>
            </div>
            <!-- /menu footer buttons -->
          </div>
        </div>

        <!-- top navigation -->
        <div class="top_nav">
            <div class="nav_menu">
                <div class="nav toggle">
                  <a id="menu_toggle"><i class="fas fa-bars"></i></a>
                </div>
                <nav class="nav navbar-nav">
                <ul class="navbar-right">
                  <li class="nav-item dropdown open" style="padding-left: 15px;">
                    <a href="javascript:;" class="user-profile dropdown-toggle" aria-haspopup="true" id="navbarDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                      <img src="images/img.jpg" alt="">John Doe
                    </a>
                    <div class="dropdown-menu dropdown-usermenu float-end" aria-labelledby="navbarDropdown">
                      <a class="dropdown-item"  href="javascript:;"> Profile</a>
                        <a class="dropdown-item"  href="javascript:;">
                          <span class="badge bg-red float-end">50%</span>
                          <span>Settings</span>
                        </a>
                    <a class="dropdown-item"  href="javascript:;">Help</a>
                      <a class="dropdown-item"  href="login.html"><i class="fas fa-sign-out-alt float-end"></i> Log Out</a>
                    </div>
  
                  <li role="presentation" class="nav-item dropdown open">
                    <a href="javascript:;" class="dropdown-toggle info-number" id="navbarDropdown1" data-bs-toggle="dropdown" aria-expanded="false">
                      <i class="fas fa-envelope"></i>
                      <span class="badge bg-green">6</span>
                    </a>
                    <ul class="dropdown-menu list-unstyled msg_list" role="menu" aria-labelledby="navbarDropdown1">
                      <li class="nav-item">
                        <a class="dropdown-item">
                          <span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
                          <span>
                            <span>John Smith</span>
                            <span class="time">3 mins ago</span>
                          </span>
                          <span class="message">
                            Film festivals used to be do-or-die moments for movie makers. They were where...
                          </span>
                        </a>
                      <li class="nav-item">
                        <a class="dropdown-item">
                          <span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
                          <span>
                            <span>John Smith</span>
                            <span class="time">3 mins ago</span>
                          </span>
                          <span class="message">
                            Film festivals used to be do-or-die moments for movie makers. They were where...
                          </span>
                        </a>
                      <li class="nav-item">
                        <a class="dropdown-item">
                          <span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
                          <span>
                            <span>John Smith</span>
                            <span class="time">3 mins ago</span>
                          </span>
                          <span class="message">
                            Film festivals used to be do-or-die moments for movie makers. They were where...
                          </span>
                        </a>
                      <li class="nav-item">
                        <a class="dropdown-item">
                          <span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
                          <span>
                            <span>John Smith</span>
                            <span class="time">3 mins ago</span>
                          </span>
                          <span class="message">
                            Film festivals used to be do-or-die moments for movie makers. They were where...
                          </span>
                        </a>
                      <li class="nav-item">
                        <div class="text-center">
                          <a class="dropdown-item">
                            <strong>See All Alerts</strong>
                            <i class="fas fa-angle-right"></i>
                          </a>
                        </div>
                    </ul>
                </ul>
              </nav>
            </div>
          </div>
        <!-- /top navigation -->

        <!-- page content -->
        <div class="right_col" role="main">
          <div class="">
            <div class="page-title">
              <div class="title_left">
                <h3>Typography</h3>
              </div>

              <div class="title_right">
                <div class="col-md-5 col-sm-5 mb-3 float-end top_search">
                  <div class="input-group search-bar-fix">
                    <input type="text" class="form-control" placeholder="Search typography...">
                    <button class="btn btn-outline-secondary" type="button">
                      <i class="fas fa-search"></i>
                    </button>
                  </div>
                </div>
              </div>
            </div>

            <div class="clearfix"></div>

            <!-- Headings Section -->
            <div class="row mb-4">
              <div class="col-md-12">
                <div class="x_panel">
                  <div class="x_title">
                    <h4>Headings <small>HTML heading elements with Bootstrap 5 utilities</small></h4>
                    <ul class="nav navbar-right panel_toolbox">
                      <li><a class="collapse-link"><i class="fas fa-chevron-up"></i></a></li>
                      <li><a class="btn-btn-close-link"><i class="fas fa-times"></i></a></li>
                    </ul>
                    <div class="clearfix"></div>
                  </div>
                  <div class="x_content">
                    <div class="row">
                      <div class="col-md-6">
                        <h1>h1. Bootstrap heading <small class="text-muted">Secondary text</small></h1>
                        <h4>h2. Bootstrap heading <small class="text-muted">Secondary text</small></h4>
                        <h3>h3. Bootstrap heading <small class="text-muted">Secondary text</small></h3>
                        <h4>h4. Bootstrap heading <small class="text-muted">Secondary text</small></h4>
                        <h5>h5. Bootstrap heading <small class="text-muted">Secondary text</small></h5>
                        <h6>h6. Bootstrap heading <small class="text-muted">Secondary text</small></h6>
                      </div>
                      <div class="col-md-6">
                        <h3>Display Headings <small class="text-muted">For dramatic impact</small></h3>
                        <p class="text-muted small mb-3">Display headings are extra-large headings designed for hero sections and prominent titles.</p>
                        <div class="display-examples">
                          <h1 class="display-1">HERO TITLE</h1>
                          <p class="text-muted small">display-1 • 6rem (96px) • For main landing pages</p>
                          
                          <h1 class="display-2 mt-4">Feature Launch</h1>
                          <p class="text-muted small">display-2 • 5.5rem (88px) • For major announcements</p>
                          
                          <h1 class="display-3 mt-4">Section Header</h1>
                          <p class="text-muted small">display-3 • 4.5rem (72px) • For prominent sections</p>
                          
                          <h1 class="display-4 mt-4">Product Title</h1>
                          <p class="text-muted small">display-4 • 3.5rem (56px) • For product features</p>
                          
                          <h1 class="display-5 mt-4">Call to Action</h1>
                          <p class="text-muted small">display-5 • 3rem (48px) • For marketing CTAs</p>
                          
                          <h1 class="display-6 mt-4">Subtitle</h1>
                          <p class="text-muted small">display-6 • 2.5rem (40px) • For large subtitles</p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- Text Elements Section -->
            <div class="row mb-4">
              <div class="col-md-6">
                <div class="x_panel">
                  <div class="x_title">
                    <h4>Text Elements <small>Inline text elements</small></h4>
                    <ul class="nav navbar-right panel_toolbox">
                      <li><a class="collapse-link"><i class="fas fa-chevron-up"></i></a></li>
                      <li><a class="btn-btn-close-link"><i class="fas fa-times"></i></a></li>
                    </ul>
                    <div class="clearfix"></div>
                  </div>
                  <div class="x_content">
                    <p class="lead">This is a lead paragraph. It stands out from regular paragraphs.</p>
                    
                    <p>You can use the mark tag to <mark>highlight</mark> text.</p>
                    <p><del>This line of text is meant to be treated as deleted text.</del></p>
                    <p><s>This line of text is meant to be treated as no longer accurate.</s></p>
                    <p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
                    <p><u>This line of text will render as underlined.</u></p>
                    <p><small>This line of text is meant to be treated as fine print.</small></p>
                    <p><strong>This line rendered as bold text.</strong></p>
                    <p><em>This line rendered as italicized text.</em></p>
                    
                    <h5>Abbreviations</h5>
                    <p><abbr title="attribute">attr</abbr></p>
                    <p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
                  </div>
                </div>
              </div>

              <div class="col-md-6">
                <div class="x_panel">
                  <div class="x_title">
                    <h4>Text Utilities <small>Bootstrap 5 text classes</small></h4>
                    <ul class="nav navbar-right panel_toolbox">
                      <li><a class="collapse-link"><i class="fas fa-chevron-up"></i></a></li>
                      <li><a class="btn-btn-close-link"><i class="fas fa-times"></i></a></li>
                    </ul>
                    <div class="clearfix"></div>
                  </div>
                  <div class="x_content">
                    <h5>Text Colors</h5>
                    <p class="text-primary">Primary text color</p>
                    <p class="text-secondary">Secondary text color</p>
                    <p class="text-success">Success text color</p>
                    <p class="text-danger">Danger text color</p>
                    <p class="text-warning">Warning text color</p>
                    <p class="text-info">Info text color</p>
                    <p class="text-light bg-dark p-2">Light text color</p>
                    <p class="text-dark">Dark text color</p>
                    <p class="text-muted">Muted text color</p>

                    <h5>Text Alignment</h5>
                    <p class="text-start">Left aligned text on all viewport sizes.</p>
                    <p class="text-center">Center aligned text on all viewport sizes.</p>
                    <p class="text-end">Right aligned text on all viewport sizes.</p>
                  </div>
                </div>
              </div>
            </div>

            <!-- Typography Examples Section -->
            <div class="row mb-4">
              <div class="col-md-12">
                <div class="x_panel">
                  <div class="x_title">
                    <h4>Real-World Typography Examples <small>Practical usage demonstrations</small></h4>
                    <ul class="nav navbar-right panel_toolbox">
                      <li><a class="collapse-link"><i class="fas fa-chevron-up"></i></a></li>
                      <li><a class="btn-btn-close-link"><i class="fas fa-times"></i></a></li>
                    </ul>
                    <div class="clearfix"></div>
                  </div>
                  <div class="x_content">
                    <div class="row">
                      <div class="col-md-8">
                        <!-- Article Example -->
                        <article class="mb-5">
                          <header class="mb-4">
                            <h1 class="display-4">The Future of Web Design</h1>
                            <p class="lead text-muted">Exploring modern trends and best practices in contemporary web development</p>
                            <div class="d-flex align-items-center text-muted small">
                              <span class="me-3"><i class="fas fa-user me-1"></i> By Sarah Johnson</span>
                              <span class="me-3"><i class="fas fa-calendar me-1"></i> March 15, 2032</span>
                              <span><i class="fas fa-clock me-1"></i> 8 min read</span>
                            </div>
                          </header>

                          <div class="article-content">
                            <p class="lead">In the rapidly evolving landscape of web design, staying current with the latest trends and technologies is essential for creating engaging, accessible, and performant user experiences.</p>

                            <h4>Design Principles That Matter</h4>
                            <p>Modern web design is built on several foundational principles that guide successful projects. These include <strong>user-centered design</strong>, <em>accessibility-first thinking</em>, and <mark>performance optimization</mark>.</p>

                            <h3>Key Considerations</h3>
                            <ul class="list-unstyled">
                              <li class="mb-2"><i class="fas fa-check text-success me-2"></i> Mobile-first responsive design</li>
                              <li class="mb-2"><i class="fas fa-check text-success me-2"></i> Semantic HTML structure</li>
                                                             <li class="mb-2"><i class="fas fa-check text-success me-2"></i> Progressive enhancement</li>
                              <li class="mb-2"><i class="fas fa-check text-success me-2"></i> Performance budgets</li>
                            </ul>

                            <blockquote class="blockquote border-start border-4 border-primary ps-4 py-2 my-4">
                              <p class="mb-2">"Design is not just what it looks like and feels like. Design is how it works."</p>
                              <footer class="blockquote-footer">Steve Jobs</footer>
                            </blockquote>

                            <h3>Implementation Strategy</h3>
                            <p>When implementing these principles, consider the following workflow:</p>
                            <ol>
                              <li><strong>Research and Discovery:</strong> Understanding user needs and business requirements</li>
                              <li><strong>Design and Prototyping:</strong> Creating wireframes and interactive prototypes</li>
                              <li><strong>Development:</strong> Building with modern frameworks and tools</li>
                              <li><strong>Testing and Optimization:</strong> Continuous improvement based on user feedback</li>
                            </ol>
                          </div>
                        </article>
                      </div>

                      <div class="col-md-4">
                        <!-- Sidebar Example -->
                        <aside>
                          <div class="card mb-4">
                            <div class="card-header">
                              <h5 class="card-title mb-0">Quick Stats</h5>
                            </div>
                            <div class="card-body">
                              <div class="mb-3">
                                <div class="d-flex justify-content-between">
                                  <span class="fw-semibold">Mobile Users</span>
                                  <span class="badge bg-primary">68%</span>
                                </div>
                              </div>
                              <div class="mb-3">
                                <div class="d-flex justify-content-between">
                                  <span class="fw-semibold">Page Load Time</span>
                                  <span class="badge bg-success">2.3s</span>
                                </div>
                              </div>
                              <div class="mb-3">
                                <div class="d-flex justify-content-between">
                                  <span class="fw-semibold">Accessibility Score</span>
                                  <span class="badge bg-info">95/100</span>
                                </div>
                              </div>
                            </div>
                          </div>

                          <div class="card">
                            <div class="card-header">
                              <h5 class="card-title mb-0">Related Resources</h5>
                            </div>
                            <div class="card-body">
                              <ul class="list-unstyled mb-0">
                                <li class="mb-2">
                                  <a href="#" class="text-decoration-none">
                                    <i class="fas fa-book me-2 text-primary"></i>
                                    Web Design Best Practices
                                  </a>
                                <li class="mb-2">
                                  <a href="#" class="text-decoration-none">
                                    <i class="fas fa-code me-2 text-success"></i>
                                    CSS Grid and Flexbox Guide
                                  </a>
                                <li class="mb-2">
                                  <a href="#" class="text-decoration-none">
                                    <i class="fas fa-mobile-alt me-2 text-warning"></i>
                                    Mobile-First Design Patterns
                                  </a>
                                <li>
                                  <a href="#" class="text-decoration-none">
                                    <i class="fas fa-universal-access me-2 text-info"></i>
                                    Accessibility Guidelines
                                  </a>
                              </ul>
                            </div>
                          </div>
                        </aside>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- Components Section -->
            <div class="row mb-4">
              <div class="col-md-6">
                <div class="x_panel">
                  <div class="x_title">
                    <h4>Badges & Labels <small>Status indicators and tags</small></h4>
                    <ul class="nav navbar-right panel_toolbox">
                      <li><a class="collapse-link"><i class="fas fa-chevron-up"></i></a></li>
                      <li><a class="btn-btn-close-link"><i class="fas fa-times"></i></a></li>
                    </ul>
                    <div class="clearfix"></div>
                  </div>
                  <div class="x_content">
                    <h5>Standard Badges</h5>
                    <div class="mb-3">
                      <span class="badge bg-primary me-2">Primary</span>
                      <span class="badge bg-secondary me-2">Secondary</span>
                      <span class="badge bg-success me-2">Success</span>
                      <span class="badge bg-danger me-2">Danger</span>
                      <span class="badge bg-warning text-dark me-2">Warning</span>
                      <span class="badge bg-info me-2">Info</span>
                      <span class="badge bg-light text-dark me-2">Light</span>
                      <span class="badge bg-dark">Dark</span>
                    </div>

                    <h5>Rounded Pill Badges</h5>
                    <div class="mb-3">
                      <span class="badge rounded-pill bg-primary me-2">Primary</span>
                      <span class="badge rounded-pill bg-success me-2">Success</span>
                      <span class="badge rounded-pill bg-warning text-dark me-2">Warning</span>
                      <span class="badge rounded-pill bg-danger">Danger</span>
                    </div>

                    <h5>Contextual Usage</h5>
                    <div class="mb-3">
                      <h6>Messages <span class="badge bg-secondary">4</span></h6>
                      <h6>Notifications <span class="badge bg-danger">12</span></h6>
                      <h6>Tasks <span class="badge bg-success">8</span></h6>
                    </div>

                    <h5>Status Indicators</h5>
                    <div>
                      <p class="mb-1">
                        <span class="badge bg-success me-2">Online</span> System operational
                      </p>
                      <p class="mb-1">
                        <span class="badge bg-warning text-dark me-2">Maintenance</span> Scheduled downtime
                      </p>
                      <p class="mb-1">
                        <span class="badge bg-danger me-2">Offline</span> Service unavailable
                      </p>
                    </div>
                  </div>
                </div>
              </div>

              <div class="col-md-6">
                <div class="x_panel">
                  <div class="x_title">
                    <h4>Lists & Content <small>Structured content examples</small></h4>
                    <ul class="nav navbar-right panel_toolbox">
                      <li><a class="collapse-link"><i class="fas fa-chevron-up"></i></a></li>
                      <li><a class="btn-btn-close-link"><i class="fas fa-times"></i></a></li>
                    </ul>
                    <div class="clearfix"></div>
                  </div>
                  <div class="x_content">
                    <h5>Definition Lists</h5>
                    <dl class="row">
                      <dt class="col-sm-3">Frontend</dt>
                      <dd class="col-sm-9">The user-facing part of a website or application</dd>
                      
                      <dt class="col-sm-3">Backend</dt>
                      <dd class="col-sm-9">Server-side logic and database management</dd>
                      
                      <dt class="col-sm-3">API</dt>
                      <dd class="col-sm-9">Application Programming Interface for data exchange</dd>
                    </dl>

                    <h5>Feature List</h5>
                    <ul class="list-group list-group-flush">
                      <li class="list-group-item d-flex justify-content-between align-items-center">
                        Responsive Design
                        <span class="badge bg-primary rounded-pill">✓</span>
                      <li class="list-group-item d-flex justify-content-between align-items-center">
                        Cross-browser Support
                        <span class="badge bg-primary rounded-pill">✓</span>
                      <li class="list-group-item d-flex justify-content-between align-items-center">
                        SEO Optimized
                        <span class="badge bg-success rounded-pill">✓</span>
                      <li class="list-group-item d-flex justify-content-between align-items-center">
                        PWA Ready
                        <span class="badge bg-warning rounded-pill">Soon</span>
                    </ul>
                  </div>
                </div>
              </div>
            </div>

            <!-- Code and Preformatted Text -->
            <div class="row mb-4">
              <div class="col-md-12">
                <div class="x_panel">
                  <div class="x_title">
                    <h4>Code Examples <small>Inline and block code formatting</small></h4>
                    <ul class="nav navbar-right panel_toolbox">
                      <li><a class="collapse-link"><i class="fas fa-chevron-up"></i></a></li>
                      <li><a class="btn-btn-close-link"><i class="fas fa-times"></i></a></li>
                    </ul>
                    <div class="clearfix"></div>
                  </div>
                  <div class="x_content">
                    <div class="row">
                      <div class="col-md-6">
                        <h5>Inline Code</h5>
                        
                        <h5>Keyboard Input</h5>
                        <p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy and <kbd>Ctrl</kbd> + <kbd>V</kbd> to paste.</p>
                        
                        <h5>Sample Output</h5>
                        <samp>This text is meant to be treated as sample output from a computer program.</samp>
                      </div>
                      <div class="col-md-6">
                        <h5>Code Block</h5>
                        <pre><code>function greetUser(name) {
  if (!name) {
    throw new Error('Name is required');
  }
  
  return `Hello, ${name}! Welcome to our application.`;
}

// Usage example
const message = greetUser('John Doe');
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- /page content -->

        <!-- footer content -->
        <footer>
          <div class="float-end">
            Gentelella - Bootstrap Admin Template by <a href="https://colorlib.com">Colorlib</a>
          </div>
          <div class="clearfix"></div>
        </footer>
        <!-- /footer content -->
      </div>
    </div>    <!-- Compiled JavaScript (includes jQuery, Bootstrap, and all vendor scripts) -->
    
  </body>
</html>